<template>
    <div class="community">
      <Header :header="header"></Header>
      <div class="recommend">交易列表</div>
      <van-collapse v-model="collapse.activename" accordion>
        <van-collapse-item
          v-for="item in collapse.communitylist"
          :key="item.id"
          :title="item.price" :name="item.id">
          <div class="desc">
            <div class="img">
              <img :src="item.img" style="width: 100%; height: auto;" :alt="item.owner"/>
            </div>
            <div class="info">
              <div class="info-one">
                <div class="info-one-owner">
                  <span>属主：</span>
                  <span>{{item.owner}}</span>
                </div>
                <div class="info-one-location van-ellipsis">
                  <span>位置：</span>
                  <span>{{item.location}}</span>
                </div>
              </div>
              <div class="info-two">
                <div class="info-two-number">
                  <span>编号：</span>
                  <span>{{item.number}}</span>
                </div>
                <div class="info-two-tag">
                  <span>兴趣：</span>
                  <span>{{item.tag}}</span>
                </div>
              </div>
              <div class="info-three">
                <van-button round type="primary">购买</van-button>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <transition
        appear
        appear-active-class="animated bounceInLeft"
      >
        <vue-fab
          size="big"
          mainBtnColor="#A9A9A9"
          autoHideDirection="down"
          @clickMainBtn="clickMainBtn">
          <fab-item
            v-for="item in vuefab"
            :key="item.id"
            :idx="item.id"
            :title="item.title"
            :color="item.color"
            :icon="item.icon"
            @clickItem="clickItem"
          ></fab-item>
        </vue-fab>
      </transition>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Community',
  components: {
    Header: () => import('Lcomponents/Header')
  },
  data: function () {
    return {
      header: {
        bgcolor: '#00BCD4',
        search: '输入 城市/兴趣',
        select: {
          options: [{
            value: '选项1',
            label: '动漫'
          }, {
            value: '选项2',
            label: '电影'
          }, {
            value: '选项3',
            label: '旅游'
          }, {
            value: '选项4',
            label: '美食'
          }],
          value: '选项1'
        }
      },
      collapse: {
        activename: '0',
        communitylist: Array
      },
      vuefab: [
        {
          id: 0,
          icon: 'comment',
          title: '交流',
          color: '#4B0082'
        }, {
          id: 1,
          icon: 'attach_money',
          title: '交易',
          color: '#DAA520'
        }
      ]
    }
  },
  mounted: function () {
    this.getCommunityList()
  },
  activated: function () {
    this.$store.dispatch('changeTabbarState', true)
    this.$store.dispatch('changeTabbarActive', 1)
  },
  methods: {
    clickItem: function (O) {
      console.log(O.idx)
    },
    clickMainBtn: function () {
      console.log('')
    },
    getCommunityList: function () {
      axios.get('/static/mock/community.json')
        .then(this.getCommunityListSucc)
    },
    getCommunityListSucc: function (res) {
      if (res && res.data && res.data.ret) {
        this.collapse.communitylist = res.data.data.community_list
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .van-collapse-item >>> .van-cell
    padding: 50px 15px
  .van-collapse-item >>> .van-cell__title
    color: darkred
    font-size: 32px
    text-align: center
  .van-collapse-item >>> .van-collapse-item__content
    padding 0 5px 0
  .fab-main-container >>> .fab-size-big[data-v-77282e1a]
    width: 128px
    height: 128px
  .community
    width: 100%
    height: 93%
    .recommend
      height: 50px
      line-height: 50px
      margin: 5px 0
      padding-left: 5px
      background-color: #808080
      color: #fff
      border: 2px solid #DCDCDC
    .van-collapse
      .van-collapse-item
        .desc
          display: flex
          height: 240px
          .img
            display: flex
            float: left
            margin: 10px 0
            width: 220px
            height: 220px
            align-items: center
            justify-content: center
          .info
            flex: 1
            margin-left: 5px
            background-color: #666
            color: #fff
            .info-one
              display: flex
              width: 100%
              height: 30%
              .info-one-owner
                width: 40%
                border: 2px solid #eee
              .info-one-location
                flex: 1
                max-width: 300px
                padding-left: 5px
                border: 2px solid #eee
            .info-two
              display: flex
              width: 100%
              height: 30%
              .info-two-number
                width: 40%
                border: 2px solid #eee
              .info-two-tag
                flex: 1
                padding-left: 5px
                border: 2px solid #eee
            .info-three
              width: 100%
              height: 40%
              line-height: 100px
              padding-left: 160px
              .van-button
                width: 92px
                height: 56px
                line-height: 56px
                font-size: 16px
                padding: 0
    .fab-main-container
      right: 32% !important
      bottom: 32% !important
</style>
